<template>
  <div class="PhoneMsg-content">
    <Row :gutter="4">
      <Col span="2">
        <Input placeholder="品牌" v-model="queryObj.brand"/>
      </Col>
      <Col span="2">
        <Input placeholder="手机号" v-model="queryObj.phone"/>
      </Col>
      <Col span="2">
        <Input placeholder="IP" v-model="queryObj.ip"/>
      </Col>
      <Col span="2">
        <Input placeholder="错误码" v-model="queryObj.errorCode"/>
      </Col>
      <Col span="2">
        <Input placeholder="管理员" v-model="queryObj.admin"/>
      </Col>
      <Col span="6">
        <DatePicker v-model="dateTime" type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="开始时间 ~ 结束时间" style="width: 100%"></DatePicker>
      </Col>
      <Col span="2">
        <Button type="primary" @click="handleSearch()">查询</Button>
      </Col>
    </Row>
    <div class="panel-count">
      共 <span class="count-number">{{this.total.toLocaleString()}}</span> 条数据({{this.spendTime}} 秒)
    </div>
    <Card>
      <tables :loading="loading" stripe :row-class-name="rowClassName" ref="tables" v-model="tableData" :columns="columns"/>
      <Page class="panel-page" :total="total" :current="page" :page-size="size" @on-change="changePage" show-elevator />
    </Card>

    <div>
      <Modal
        v-model="modelData"
        title="数据"
        footer-hide="true"
        @on-ok="ok"
        @on-cancel="cancel">
        <pre>{{this.data}}</pre>
      </Modal>
    </div>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { apiPhoneMsg } from '@/api/phoneMsg'
export default {
  name: 'PhoneMsg',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '时间', key: 'time', sortable: true, width: 175 },
        { title: '追溯码', key: 'traceCode', sortable: false, width: 280 },
        { title: '手机号', key: 'phone', sortable: false, width: 150 },
        { title: '短信内容', key: 'msgContent', sortable: false }
      ],
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      spendTime: 0,
      dateTime: [],
      queryObj: {
        ip: '',
        brand: '',
        phone: '',
        admin: '',
        errorCode: '',
        startDateTime: '',
        endDateTime: ''
      },
      modelData: false,
      data: {},
      panelSearchFull: false,
      panelSearchAdvanced: false,
      panelSearchTrace: false,
      loading: false
    }
  },
  methods: {
    // 获取数据
    getData () {
      this.loading = true
      const param = JSON.stringify(this.queryObj)
      // console.log(param)
      apiPhoneMsg(this.page, param).then(res => {
        this.total = res.total
        this.page = res.page
        this.spendTime = res.spendTime
        this.tableData = res.content
        this.loading = false
      })
    },
    // 点击页码
    changePage (page) {
      this.page = page
      this.getData()
    },
    handleSearch () {
      this.page = 1
      if (this.dateTime.length === 2) {
        this.queryObj.startDateTime = this.dateTime[0]
        this.queryObj.endDateTime = this.dateTime[1]
      }
      this.getData()
    }
  },
  mounted () {
    this.page = 1
    this.getData()
  }
}
</script>

<style lang="less">
  @import "./PhoneMsg";
</style>
